<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>物料管理</title>
    <link href="//unpkg.com/layui@2.11.5/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .material-container {
            padding: 20px;
        }
        .search-panel {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .action-panel {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .table-panel {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .search-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        .search-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-item label {
            min-width: 80px;
            font-weight: 500;
        }
        .action-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .btn-primary {
            background: #1e88e5;
            border-color: #1e88e5;
        }
        .btn-success {
            background: #43a047;
            border-color: #43a047;
        }
        .btn-warning {
            background: #ff9800;
            border-color: #ff9800;
        }
        .btn-danger {
            background: #f44336;
            border-color: #f44336;
        }
    </style>
</head>
<body>
    <div class="material-container">
        <!-- 搜索面板 -->
        <div class="search-panel">
            <h3><i class="fas fa-search"></i> 物料搜索</h3>
            <div class="search-row">
                <div class="search-item">
                    <label>物料编码:</label>
                    <input type="text" class="layui-input" id="materialCode" placeholder="请输入物料编码">
                </div>
                <div class="search-item">
                    <label>物料名称:</label>
                    <input type="text" class="layui-input" id="materialName" placeholder="请输入物料名称">
                </div>
                <div class="search-item">
                    <label>物料类型:</label>
                    <select class="layui-select" id="materialType">
                        <option value="">全部</option>
                        <option value="raw">原材料</option>
                        <option value="semi">半成品</option>
                        <option value="finished">成品</option>
                    </select>
                </div>
                <div class="search-item">
                    <button class="layui-btn btn-primary" onclick="searchMaterials()">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                    <button class="layui-btn layui-btn-primary" onclick="resetSearch()">
                        <i class="fas fa-redo"></i> 重置
                    </button>
                </div>
            </div>
        </div>

        <!-- 操作面板 -->
        <div class="action-panel">
            <h3><i class="fas fa-tools"></i> 操作管理</h3>
            <div class="action-buttons">
                <button class="layui-btn btn-success" onclick="addMaterial()">
                    <i class="fas fa-plus"></i> 新增物料
                </button>
                <button class="layui-btn btn-warning" onclick="batchImport()">
                    <i class="fas fa-upload"></i> 批量导入
                </button>
                <button class="layui-btn btn-primary" onclick="exportMaterials()">
                    <i class="fas fa-download"></i> 导出物料
                </button>
            </div>
        </div>

        <!-- 表格面板 -->
        <div class="table-panel">
            <h3><i class="fas fa-list"></i> 物料列表</h3>
            <table id="materialTable" lay-filter="materialTable"></table>
        </div>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">
            <i class="fas fa-edit"></i> 编辑
        </a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">
            <i class="fas fa-trash"></i> 删除
        </a>
    </script>

    <!-- 状态列模板 -->
    <script type="text/html" id="statusTpl">
        {{# if(d.status === 'active'){ }}
            <span class="layui-badge layui-bg-green">启用</span>
        {{# } else { }}
            <span class="layui-badge layui-bg-gray">禁用</span>
        {{# } }}
    </script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="//unpkg.com/layui@2.11.5/dist/layui.js"></script>
    <script>
        layui.use(['table', 'layer', 'form'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            
            // 初始化表格
            table.render({
                elem: '#materialTable',
                url: '/api/materials', // 这里需要后端提供API接口
                page: true,
                cols: [[
                    {field: 'materialCode', title: '物料编码', width: 120, sort: true},
                    {field: 'materialName', title: '物料名称', width: 200},
                    {field: 'materialType', title: '物料类型', width: 100, templet: function(d){
                        var types = {'raw': '原材料', 'semi': '半成品', 'finished': '成品'};
                        return types[d.materialType] || d.materialType;
                    }},
                    {field: 'specification', title: '规格型号', width: 150},
                    {field: 'unit', title: '单位', width: 80},
                    {field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
                    {field: 'createTime', title: '创建时间', width: 160, sort: true},
                    {title: '操作', width: 150, toolbar: '#operationBar', fixed: 'right'}
                ]],
                data: [
                    // 模拟数据，实际应该从后端获取
                    {
                        materialCode: 'M001',
                        materialName: '钢材A型',
                        materialType: 'raw',
                        specification: 'Q235 10mm',
                        unit: '吨',
                        status: 'active',
                        createTime: '2024-01-15 10:30:00'
                    },
                    {
                        materialCode: 'M002',
                        materialName: '轴承B型',
                        materialType: 'semi',
                        specification: '6205-2RS',
                        unit: '个',
                        status: 'active',
                        createTime: '2024-01-15 11:20:00'
                    }
                ]
            });
            
            // 监听工具条
            table.on('tool(materialTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    editMaterial(data);
                } else if(obj.event === 'delete'){
                    deleteMaterial(data);
                }
            });
        });
        
        // 搜索物料
        function searchMaterials() {
            var code = $('#materialCode').val();
            var name = $('#materialName').val();
            var type = $('#materialType').val();
            
            // 这里实现搜索逻辑
            console.log('搜索条件:', {code, name, type});
            layer.msg('搜索功能待实现');
        }
        
        // 重置搜索
        function resetSearch() {
            $('#materialCode').val('');
            $('#materialName').val('');
            $('#materialType').val('');
        }
        
        // 新增物料
        function addMaterial() {
            layer.open({
                type: 1,
                title: '新增物料',
                area: ['600px', '500px'],
                content: '<div style="padding: 20px;">新增物料表单待实现</div>'
            });
        }
        
        // 编辑物料
        function editMaterial(data) {
            layer.open({
                type: 1,
                title: '编辑物料: ' + data.materialName,
                area: ['600px', '500px'],
                content: '<div style="padding: 20px;">编辑物料表单待实现</div>'
            });
        }
        
        // 删除物料
        function deleteMaterial(data) {
            layer.confirm('确定要删除物料 "' + data.materialName + '" 吗？', function(index){
                // 这里实现删除逻辑
                layer.msg('删除功能待实现');
                layer.close(index);
            });
        }
        
        // 批量导入
        function batchImport() {
            layer.msg('批量导入功能待实现');
        }
        
        // 导出物料
        function exportMaterials() {
            layer.msg('导出功能待实现');
        }
    </script>
</body>
</html>
